<template>
	<view class="container">
		<picker mode="selector" :range="constellations" @change="onConstellationChange">
			<view class="picker">选择星座：{{ selectedConstellation }}</view>
		</picker>

		<button @click="fetchHoroscope" :loading="loading" type="primary">查询运势</button>

		<view v-if="horoscope" class="result">
			<text class="title">{{ horoscope.星座 }} 今日运势</text>
			<view class="item"><text class="label">贵人方位：</text>{{ horoscope.贵人方位 }}</view>
			<view class="item"><text class="label">贵人星座：</text>{{ horoscope.贵人星座 }}</view>
			<view class="item"><text class="label">幸运数字：</text>{{ horoscope.幸运数字 }}</view>
			<view class="item"><text class="label">幸运颜色：</text>{{ horoscope.幸运颜色 }}</view>
			<view class="item"><text class="label">爱情运势：</text>{{ horoscope.爱情运势 }}</view>
			<view class="item"><text class="label">财富运势：</text>{{ horoscope.财富运势 }}</view>
			<view class="item"><text class="label">事业运势：</text>{{ horoscope.事业运势 }}</view>
			<view class="item"><text class="label">整体运势：</text>{{ horoscope.整体运势 }}</view>
			<view class="item"><text class="label">提示：</text>{{ horoscope.提示 }}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import request from '../../utils/request'

	const constellations = [
		'白羊', '金牛', '双子', '巨蟹', '狮子', '处女',
		'天秤', '天蝎', '射手', '摩羯', '水瓶', '双鱼'
	]

	const selectedConstellation = ref('')
	const horoscope = ref(null)
	const loading = ref(false)

	const onConstellationChange = (e) => {
		selectedConstellation.value = constellations[e.detail.value]
	}

	const fetchHoroscope = () => {
		if (!selectedConstellation.value) {
			uni.showToast({
				title: '请先选择星座',
				mask: true,
				icon: 'error'
			})
			return
		}
		request.getHoroscope('json', selectedConstellation.value).then(res => {
			horoscope.value = res
		})
	}
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.picker {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
		text-align: center;
	}

	.result {
		margin-top: 20px;
		padding: 15px;
		background-color: #fffaf0;
		border-radius: 8px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
	}

	.item {
		margin-bottom: 8px;
	}

	.label {
		font-weight: bold;
		color: #333;
	}
</style>